<template>
    <view class="content">
        <van-tabs sticky v-model:active="tabsAction" @click="clickTabsHandler">
            <van-tab title="正在热映" :name="1">
                <list :list="hotShowList"></list>
                <van-empty description="暂无更多数据" v-if="!hotShowList.length" />
                <van-divider dashed content-position="center" v-if="statue1 === 'nomore'">没有更多了</van-divider>
                <view style="display: flex;justify-content: center;">

                    <van-loading vertical v-if="statue1 === 'loading'">
                    <template #icon>
                        <van-icon name="star-o" size="30" />
                    </template>
                    加载中...
                </van-loading>
                </view>

            </van-tab>
            <van-tab title="即将上映" :name="2">
                <list :list="comingSoonList"></list>
                <van-empty description="暂无更多数据" v-if="!statue2" />
                <van-divider dashed content-position="center" v-if="statue2">没有更多了</van-divider>
            </van-tab>
        </van-tabs>
    </view>
</template>

<script setup lang="ts">
import type { IncludeIdObject } from '@/utils/type'
import home from '@/api/home';
import { ref, watch } from 'vue'
import { onShow, onReachBottom} from "@dcloudio/uni-app"
import useCityStore from '@/store/city'


const cityStore = useCityStore();
// 获取城市id
const cityId = ref(cityStore.city.cityId || "110100");

/* 响应式数据 */
const tabsAction = ref(1);
// 热映数据
const hotShowList = ref<IncludeIdObject[]>([]);
// 当前页数
const pageNum = ref(1);
// 每页的条数
const pageSize = ref(10);
// 该页面的状态数据——正在热映 页面总是否有数据
const statue1 = ref("more");
// 该页面的状态数据——即将上映 页面总是否有数据
const statue2 = ref(false);
// 即将上映的数据列表
const comingSoonList = ref<any[]>([]);



/* 自定义功能函数 */
// 获取热映数据
const getHotShow = async () => {
    // 正在热映的type数据为1
    try {
        statue1.value = 'loading';
        let result = await home.getHotShow({
            cityId: cityId.value!,
            k: '4503069',
            type: 1,
            pageNum: pageNum.value,
            pageSize: pageSize.value
        });
        if (result && result.status === 0) {
            if (hotShowList.value.length < result.data.total) {
                statue1.value = "more";
            } else {
                statue1.value = "nomore";
            }
            hotShowList.value.push(...result.data.films);
            
        }
    } catch (error) {
        
        statue1.value = "error";
    }
}
const getComingSoon = async () => {
    // 正在热映的type数据为2
    try {
        let result = await home.getHotShow({
            cityId: cityId.value!,
            k: '4503069',
            type: 2,
            pageNum: 1,
            pageSize: 10
        });
        if (result && result.status === 0) {
            statue2.value = true;
            comingSoonList.value.push(...result.data.films);
        }
    } catch (error) {
        console.log(error)
    }
}
/* 生命周期函数 */
onShow(() => {
    if(!hotShowList.value.length){
       
        // 清空一下数据
        hotShowList.value = [];
        cityStore.city.cityId && (cityId.value = cityStore.city.cityId!);
      
        pageNum.value = 1;
        // 调用获取热映数据的功能函数
        getHotShow();
    }
})
watch(() => cityStore.city.cityId, (nval) => {
    console.log("数据监听：",nval )
    hotShowList.value = [];
    pageNum.value = 1;
    getHotShow();
})

// 用户触底触发的生命周期函数
onReachBottom(() => {
    if (tabsAction.value && statue1.value === "more") {
        // 正在热映界面，触底重新发送请求
        pageNum.value++;
        // 重新发请求拿数据
        getHotShow();
    }
})

/* 事件的回调函数 */
function clickTabsHandler(event: MouseEvent) {
    if ((event.detail as any).name === 1) {
        console.log("正在热映");
    } else {
        console.log("即将上映");
        if(!comingSoonList.value.length){
            // 获取即将上映的数据
            getComingSoon();
        }

    }
}

</script>

<style>
.content {
    margin-left: 30rpx;
}
</style>
